# 什么是前端组件化

在项目发展到一定的程度的时候，页面的逻辑会越来越多，代码量也会越来越多，经常会牵一发而动全身。并且代码之间也可能会相互影响，比如全局变量的问题。不管是 JS 还是 CSS，只要有相同的全局变量，就会存在覆盖的问题，可能哪一天你正在开发代码，QA 小姐姐就过来找你，但是最后排查下来，发现是你负责的功能被其他人的代码影响到了(╬￣皿￣)=○。

同时，重复的功能重复开发，也是浪费劳动力的一种浪费。所以，组件化解决最大的两个问题就是：代码复用和作用域隔离。

在这种时候，就会考虑进行拆分，分治思想就是很好的方法论。组件化就是分治思想在前端的另一个应用。组件化是将一个复杂的业务场景分解为若干个小场景，这些小场景之间互不干扰、通过暴露出来的接口进行组装。这样就可以分别开发，然后进行随意的组合，后期如果某一部分出问题，就可以单独修复，不影响全局。和模块相比，组件更偏向于运行时，模块偏向于代码结构的组织方式。并且组件有更为复杂的状态和生命周期。

其实组件化的思想在我们平时生活中也十分常见。比如一辆马萨拉蒂跑车：一辆跑车可能包括车身壳体、车门、车床、轮胎等不同的零件。而这些零件可能是由不同的供应商提供的，也可能是自己流水线生产的，最后将这些零件组装在一起。后期在使用的过程中，某个零件出问题了，那么只需要将有问题的零件进行更换或者维修即可。

随着 Vue、React 的前端框架的兴起，前端组件化已经渐渐成为前端开发的共识和标配。就拿 Vue 来说，Vue 的一个核心思想就是组件化。Vue 提倡让我们将大型项目拆分为多个小型、独立和可复用的组件。从 Vue 推崇的文件结构也可以看出其组件化的思想，Vue 提倡我们将一个组件的 CSS、JavaScript、HTML、图片等资源组织在一起，每一个组件内部的资源都是独立的，互不干扰的，目录就是最好的命名空间。组件和组件之间可以相互连接和嵌套。一个页面可以从根节点开始抽象为一棵组件数树。

# 前端组件化发展之路

# JS 组件化

在交互较少的静态页面时期，前端整体的代码量不多，需要共用的代码也不多，大部分需要共享的只是一些公共函数。我们把需要共用的内容存放在一个公共文件中，在用到的地方引入该文件，这就实现了最简单的代码复用。

随着 JQuery、easy-ui、miniUI 等 UI 框架的出现，前端组件化进入到探索阶段。就比如曾经火爆全网的 JQuery，JQuery 建立了一套自己的插件系统，开发者可以将一些常用的逻辑封装为 JQuery 的插件，然后将插件在开源社区中共享。从逻辑简单的轮播，到功能复杂的日期选择器都可以在开源社区找到别人共享的插件。此时，前端组件化初见端倪。

随着 Angular、React、Vue 三大框架的出现，才算是真正解决了前端组件化这个问题。开发者可以创建自定义组件、并且可以将组件进行自由拼装。这些自定义组件由结构 —— 标记语言（HTML）、表现 —— 层叠样式表（CSS）和 行为 —— 脚本语言（JavaScript）组成。并且借助 npm、brew 这些包管理工具，可以方便的将自己开发的组件和其他开发者共享，同时也可以使用全社区他开发者提供的组件。至此，前端组件化有了成熟的发展。

随着三大框架的流行，诞生了一系列配套的优秀前端基础组件库，比如 Vue 的组件库 Element 和 React 的 Ant Design。这些开源的组件库封装了前端常见的基础组件比如 button（按钮）、input（输入框）、select（选择器）等，封装其页面样式、交互以及数据的处理。

基础组件库不仅帮助我们统一页面的设计风格，最重要的是提高了开发效率，特别是对一些开发人员有限的团队。

# CSS 组件化

CSS（Cascading Style Sheets） 层叠样式表，严格意义上讲，并不能称之为编程语言。其原始语法非常简单且缺乏可编程性。

在 Less 或 Sass 出现之前，CSS 的复用方式就是使用同一个命名的公共样式。因为 CSS 没有作用域，相同命名的样式后者会覆盖前者，所以 CSS 经常会有命名冲突的问题。公共样式使用同一命名的一个很大问题就是难以维护，不容易修改并且很容易会出现样式被覆盖的问题。

在